<script setup lang="ts">
import SimplifyHeader from "@/components/SimplifyHeader.vue";
import { ref } from 'vue';
import { useRouter } from "vue-router";

const totalSignUpsYesterday = ref(27);
const totalSignUpsToday = ref(35);
const router = useRouter();

const handleReady = () => {
    router.push('/editUser');
}
</script>

<template>
   <div class="create-user">
    <SimplifyHeader />
  <div class="sign-up-container">
    <h1 class="title">如何入驻?</h1>
    <p class="description">谁都好在技能猴子上开始销售了吗? 主体类型一旦选择，认证后无法修改，请选择符合要求的主体类型</p>
    
    <div class="steps-container">
      <div class="step-card">
        <div class="step-number">01</div>
        <h2 class="step-title">填写个人信息&实名认证</h2>
        <p class="step-description">为了确保平台交易安全，每位技能猴子卖家都需要提供真实性认证，平台承诺不对外泄露您的隐私信息。</p>
      </div>
      
      <div class="step-card">
        <div class="step-number">02</div>
        <h2 class="step-title">选择远程工作类型</h2>
        <p class="step-description">平台的远程工作主要有两种形式，按需成果售卖技能商品和自驾兼职类远程工作，可根据自身情况随时调整。</p>
      </div>
    </div>
    
    <button class="ready-button" @click="handleReady">准备好了</button>
    
    <div class="stats-container">
      <span class="stats-item">昨日已入驻成功 <span class="stats-highlight">{{ totalSignUpsYesterday }}位卖家</span></span>
      <span class="stats-item">今日已入驻成功 <span class="stats-highlight">{{ totalSignUpsToday }}位卖家</span></span>
    </div>
  </div>
   </div>
</template>

<style scoped lang="scss">
.create-user{
    background: #f9f9f9;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.sign-up-container {
  max-width: 1200px;
  margin: 30px auto 0;
  padding: 40px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.description {
  color: #666;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.steps-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.step-card {
  flex: 1;
  border: 1px solid rgba(25,30,40,0.08);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: left;
  position: relative;
}

.step-number {
  width: 48px;
  height: 48px;
  background-color: rgba(0, 200, 100, 0.1);
  color: #00c864;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.step-title {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.step-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.ready-button {
  background-color: #00c864;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-bottom: 30px;

  &:hover {
    background-color: #00b058;
  }
}

.stats-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
  color: #666;
}

.stats-highlight {
  color: #00c864;
  font-weight: 500;
}

@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
  }
  
  .step-card {
    width: 100%;
  }
}
</style>
